﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数学公式</title>
    <style>
        .equation-tool img{border:1px solid #ccc;margin:0 4px 4px 0;padding:4px;}
    </style>
</head>
<body>
    

    <div class="equation-tool">
        <img src="../latex/equation-1.png" data-val="\sqrt{x}" />
        <img src="../latex/equation-2.png" data-val="\sqrt[n]{x}" />
    </div>
    <div>
        <textarea id="ipt-txt"></textarea>
    </div>


    <br />
    <img src="https://www.zhihu.com/equation?tex=1" id="result-img" />

    <script src="../../Script/jquery-1.8.2.min.js"></script>
    <script>
        $(function () {
            var $txt = $('#ipt-txt');
            var html2Img = function () {
                var t = $('#ipt-txt').val().trim();
                $('#result-img').attr('src', 'https://www.zhihu.com/equation?tex=' + t);
            };

            $('.equation-tool').delegate('img', 'click', function () {
                var v = $(this).attr('data-val');
                $txt.val($txt.val() + ' ' + v);
                html2Img();
            });


            $('#ipt-txt').bind('input',function () {
                html2Img();
                
            });
        });
    </script>
</body>
</html>
